<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" :size="size">
        <el-col>
          <el-form-item>
            <el-input v-model="filters.chineseName" placeholder="商品名称"/>
          </el-form-item>
          <el-form-item>
            <el-input v-model="filters.code" placeholder="商品编码"/>
          </el-form-item>
          <el-form-item>
            <el-select v-model="filters.status" clearable placeholder="审核状态">
              <el-option v-for="item in status" :key="item.id" :label="item.status" :value="item.key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="startApplicationTime" >
            <el-date-picker
              v-model="filters.startApplicationTime" value-format="yyyy-MM-dd"
              type="date"
              placeholder="申请开始时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="endApplicationTime">
            <el-date-picker
              v-model="filters.endApplicationTime" value-format="yyyy-MM-dd"
              type="date"
              placeholder="申请结束时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item>
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary"
                       @click="resetForm('filters')"/>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;margin-top: 40px;">
      <el-form :inline="true" :size="size">
        <el-form-item>
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>
      </el-form>
      <!--表格显示列界面-->
      <table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns"
                                  @handleFilterColumns="handleFilterColumns"></table-column-filter-dialog>
    </div>
    <!--批量审核-->
    <el-col style="margin-bottom: 10px;">
      <kt-button :label="$t('action.batchReview')" :size="size" type="primary" @click="handleBatchReviewFunction()"
                 :disabled="this.multipleSelection.length===0" style="float:left;"/>
    </el-col>
    <!--表格内容栏-->
    <el-table
      :data="pageResult" :size="size" align="align" style="width: 100%" :min-height="350"
      :stripe="true" @selection-change="handleSelectionChange"
      :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
      <el-table-column type="selection" :selectable='selectTable' align="center" width="55"></el-table-column>
      <el-table-column prop="chineseName" label="商品名称" sortable></el-table-column>
      <el-table-column prop="code" label="商品编码" sortable></el-table-column>
      <el-table-column prop="unitsName" label="单位" sortable></el-table-column>
      <el-table-column prop="creator" label="提交人" sortable></el-table-column>
      <el-table-column prop="createTime" label="申请时间" sortable></el-table-column>
      <el-table-column prop="status" label="审核状态" sortable>
        <template slot-scope="scope">
          <span>{{formatStatus(scope.row.status)}}</span>
          <el-tooltip style="font-size: 16px;" effect="dark" :enterable="false" placement="right"
                      v-if="scope.row.status== 2">
            <div slot="content" style="min-width: 200px; min-height: 80px;">
              <p>审核账号：{{scope.row.merchantId}}</p>
              <p>拒绝原因: {{scope.row.refusalCause}}</p>
              <p>审核时间: {{scope.row.updateTime}}</p>
            </div>
            <i class="el-icon-question"/>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <kt-button icon="fa fa-search" :label="$t('action.detail')" :size="size" type="success"
                     @click="handleDetail(scope.row)"/>
          <kt-button icon="el-icon-view" :label="$t('action.check')" :size="size" type="danger"
                     @click="handExamine(scope.row)"
                     v-if="scope.row.status == 0"/>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar" style="padding:10px;">
      <el-pagination
        layout="total, prev, pager, next, jumper,sizes"
        @current-change="refreshPageRequest"
        @size-change="handleSizeChange"
        :current-page="pageRequest.pageNum"
        :page-size="pageRequest.pageSize"
        :total="totalSize"
        style="float:right;"
        :page-sizes="[10, 20, 30, 40]"></el-pagination>
    </div>
    <!--查看审核界面-->
    <el-dialog title="查看价格变更明细" width="40%" height="800px" :visible.sync="editDialogVisible" v-if="editDialogVisible"
               :close-on-click-modal="false">
      <el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm" :size="size" :inline="true">
        <el-form-item label="ID" prop="id" v-if="false">
          <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>
        <el-col>
          <el-table :data="priceData" style="width: 100%" :border="true">
            <el-table-column prop="modifyType" label="修改类型" :formatter="formatModifyType"></el-table-column>
            <el-table-column prop="beforeValue" label="修改前数值"></el-table-column>
            <el-table-column prop="afterValue" label="修改后数值"></el-table-column>
          </el-table>
        </el-col>
        <el-col>
          <el-form-item label="审核:" v-if="showStatus" prop="status" style="margin-top: 20px;">
            <el-select v-model="dataForm.status" placeholder="审核状态" @change="selectChangeChecked">
              <el-option v-for="item in statusData" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="拒绝原因:" v-if="selectChangeStatus" prop="refusalCause">
            <el-input type="textarea" style="width:500px;" v-model="dataForm.refusalCause" placeholder="请输入原因"
                      maxlength="200" :autosize="{ minRows: 2, maxRows: 4}" auto-complete="off" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center;margin-top: 40px;">
        <el-button :size="size" @click.native="cancle">{{ $t("action.cancel") }}</el-button>
        <el-button v-if="showStatus" :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{
          $t("action.submit") }}
        </el-button>
      </div>
    </el-dialog>
    <!--审核界面-->
    <el-dialog title="审核" width="40%" height="800px" :visible.sync="editDialogVisible1" v-if="editDialogVisible1"
               :close-on-click-modal="false">
      <el-form :model="dataForm1" label-width="100px" :rules="dataFormRules1" ref="dataForm1" :size="size"
               :inline="true">
        <el-form-item label="ID" prop="id" v-if="false">
          <el-input v-model="dataForm1.id" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="审核:" style="margin-top: 20px;" prop="status">
          <el-select v-model="dataForm1.status" placeholder="审核状态" @change="selectChangeChecked">
            <el-option v-for="item in statusData" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-col>
          <el-form-item label="拒绝原因:" v-if="selectChangeStatus" prop="refusalCause">
            <el-input type="textarea" style="width:500px;" v-model="dataForm1.refusalCause" placeholder="请输入原因"
                      maxlength="200" :autosize="{ minRows: 2, maxRows: 4}" auto-complete="off" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center;margin-top: 40px;">
        <el-button :size="size" @click.native="cancle">{{ $t("action.cancel") }}</el-button>
        <el-button :size="size" type="primary" @click.native="submitForm1" :loading="editLoading">{{ $t("action.submit")
          }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import KtButton from "@/views/Core/KtButton";
  import {format} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import {quillEditor} from "vue-quill-editor";
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";

  export default {
    components: {
      KtButton,
      TableColumnFilterDialog,
      quillEditor
    },
    data() {
      return {
        size: "small",
        showStatus: false,
        editorOption: {},
        imgUpload: this.utils.imgUploadUrl,
        status: [
          {key: 0, status: "待审核"},
          {key: 1, status: "审核通过"},
          {key: 2, status: "审核拒绝"},
          {key: 3, status: "已取消"}
        ],
        filters: {
          chineseName: "",
          businessName: "",
          status: "",
          createTime: "",
          code: "",
          startApplicationTime:"",
          endApplicationTime:""
        },
        columns: [],
        totalSize: 0,
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: [],
        priceData: [],
        statusData: [
          {
            value: '0',
            label: '请选择'
          }, {
            value: '1',
            label: '审核通过'
          }, {
            value: '2',
            label: '审核拒绝'
          }],
        multipleSelection: [],
        editLoading: false,
        editDialogVisible: false, // 新增编辑界面是否显示
        dataFormRules: {
          status: [{required: true, message: "请输入审核状态", trigger: "blur"}],
          refusalCause: [{required: true, message: "请输入拒绝原因", trigger: "blur"}]
        },
        dataForm: {
          id: "",
          status: "",
          refusalCause: ""
        }, // 新增编辑界面数据
        editDialogVisible1: false,
        dataFormRules1: {
          status: [{required: true, message: "请输入审核状态", trigger: "blur"}],
          refusalCause: [{required: true, message: "请输入拒绝原因", trigger: "blur"}]
        },
        dataForm1: {
          id: "",
          status: "",
          refusalCause: ""
        },
        dataForm2: {},
        selectChangeStatus: false
      };
    },
    mounted() {
      this.initColumns();
      this.refreshPageRequest(1);
    },
    methods: {
      // 获取分页数据
      findPage: function (params) {
        let this_=this
        if (params == undefined || params == null) {
          params = {
            pageNum: this_.pageRequest.pageNum,
            pageSize: this_.pageRequest.pageSize
          };
        }
        if (this_.filters == undefined || this_.filters == null) {
          this_.filters = {};
        }
        this_.filters.start = params.pageNum;
        this_.filters.limit = params.pageSize;
        this_.filters.dataTypePrice = 3;
        this.utils.request.queryPageProductPriceAudit(this_.filters, function (res) {
          if (res.data.rows == null) {
            res.data.rows = [];
          }
          this_.pageResult = res.data.rows;
          this_.totalSize = Number(res.data.total);
        });
      },
      // 换页刷新
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.findPage();
      },
      // 换页刷新
      handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.pageRequest.pageNum = 1;
        this.findPage();
      },
      // check所选的
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // check禁用的
      selectTable(row, index) {
        if (row.status == 0) {
          return true;
        } else {
          return false;
        }
      },
      // 状态:0待审核;1审核通过;2审核拒绝;
      formatStatus(prop) {
        if (prop == 0) {
          return "待审核";
        } else if (prop == 1) {
          return "审核通过";
        } else if (prop == 2) {
          return '审核拒绝';
        }
      },
      formatModifyType(row, column, prop) {
        if (prop == 1) {
          return "零售价";
        } else if (prop == 2) {
          return "结算价";
        } else if (prop == 3) {
          return "组合价";
        } else if (prop == 4) {
          return "价格层级";
        } else if (prop == 5) {
          return "积分";
        }
      },
      selectChangeChecked(value) {
        if (value == 2) {
          this.selectChangeStatus = true;
        } else {
          this.selectChangeStatus = false;
        }
      },
      // 详情
      handleDetail: function (params) {
        let this_ = this;
        this_.editDialogVisible = true;
        if (params.status == 0) this_.showStatus = true; else this_.showStatus = false;
        params.modifyType = 1;
        this_.priceData = [{
          modifyType: params.modifyType,
          beforeValue: params.beforeValue,
          afterValue: params.afterValue,
        }];
        this.$nextTick(function () {
          this_.dataForm = Object.assign({}, params);
        });
      },
      // 详情编辑
      submitForm: function () {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              let this_ = this;
              let params = Object.assign({}, this_.dataForm);
              if (params.status == "0") {
                this_.$message({message: "请选择审核状态", type: "error"});
                return
              }
              this.utils.request.updateProductPriceAudit(params, function (res) {
                if (res.code == "0000") {
                  this_.dataForm = {};
                  this_.$message({message: "操作成功", type: "success"});
                  this_.findPage(null);
                  this_.editDialogVisible = false;
                } else {
                  this_.$message({message: "操作失败, " + res.msg, type: "error"});
                  this_.findPage(null);
                }
              });
            });
          }
        });
      },
      // 审核
      handExamine: function (params) {
        let this_ = this;
        this_.editDialogVisible1 = true;
        this.$nextTick(function () {
          this.dataForm1 = Object.assign({}, params);
        });
      },
      // 批量审核
      handleBatchReviewFunction() {
        let this_ = this;
        this_.editDialogVisible1 = true;
        this.$nextTick(function () {
          this.dataForm1 = Object.assign({}, this_.multipleSelection);
        });
      },
      // 审核编辑
      submitForm1: function () {
        this.$refs.dataForm1.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              let this_ = this;
              let params = {};
              if (this_.multipleSelection.length > 0) {
                $.each(this_.multipleSelection, (index, val) => {
                  val.status = this_.dataForm1.status;
                  val.refusalCause = this_.dataForm1.refusalCause;
                });
                params.productPriceAuditList = this_.multipleSelection;
                if (params.status == "0") {
                  this_.$message({message: "请选择审核状态", type: "error"});
                  return
                }
                this.utils.request.updateProductPriceAuditList(params, function (res) {
                  if (res.code == "0000") {
                    this_.dataForm1 = {};
                    this_.$message({message: "操作成功", type: "success"});
                    this_.findPage(null);
                    this_.editDialogVisible1 = false;
                  } else {
                    this_.$message({message: "操作失败, " + res.msg, type: "error"});
                    this_.findPage(null);
                  }
                });
              } else {
                params = Object.assign({}, this_.dataForm1);
                if (params.status == "0") {
                  this_.$message({message: "请选择审核状态", type: "error"});
                  return
                }
                this.utils.request.updateProductPriceAudit(params, function (res) {
                  if (res.code == "0000") {
                    this_.dataForm1 = {};
                    this_.$message({message: "操作成功", type: "success"});
                    this_.findPage(null);
                    this_.editDialogVisible1 = false;
                  } else {
                    this_.$message({message: "操作失败, " + res.msg, type: "error"});
                    this_.findPage(null);
                  }
                });
              }

            });
          }
        });
      },
      // 取消
      cancle() {
        let this_ = this;
        this_.editDialogVisible = false;
        this_.editDialogVisible1 = false;
        this_.selectChangeStatus = false;
        this_.dataForm = {};
        this_.dataForm1 = {};
      },
      // 时间格式化
      dateFormat: function (row, column, cellValue, index) {
        return format(row[column.property]);
      },
      // 重置
      resetForm(formName) {
        this.filters = {};
        this.findPage();
      },
      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true);
      },
      handleFilterColumns: function (data) {
        this.pageResult = data.pageResult;
        this.$refs.tableColumnFilterDialog.setDialogVisible(false);
      },
      initColumns: function () {
        this.columns = [
          {prop: "chineseName", label: "商品名称", minWidth: 120},
          {prop: "code", label: "商品编码", minWidth: 120},
          {prop: "unitsName", label: "单位", minWidth: 120},
          {prop: "userName", label: "提交人", minWidth: 120},
          {prop: "applicationTime", label: "申请时间", minWidth: 120},
          {prop: "status", label: "审核状态", minWidth: 120,}
        ];
        var temp = [];
        $.each(this.columns, function (key, val) {
          temp.push(val);
        });
        this.pageResult = temp;
      },
    }
  };
</script>

<style scoped>
  /deep/  .el-input__inner   {
    width: 200px !important;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #2F4554;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
